/**
 * This css is familiar as the index.module.css in ./pages/, it needs to be changed.
 */
.heroBanner {
  padding: 12rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: #e5e7eb;
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

.gutter-box {
  padding: 8px 0;
  background: #00a0e9;
}

.show_title {
  text-align: left;
  font-weight: bold;
  font-size: 4em;
  color: #000103;
}

.show_text {
  text-align: left;
  font-size: 1.5em;
  color: #000103;
  /* position: relative; */
}
.button_style {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0); /* Initialize shadow */
  transition: box-shadow 0.3s ease; /* Add transition animation effect */
  background: #4f46e5;
  padding: 10px 0;
}
.button_style:hover {
  padding: 10px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  color: #ffffff;
}
.show_title_left {
  text-align: center;
  font-weight: bold;
  font-size: 4em;
  color: #000103;
}
[data-theme='dark'] .show_title {
  color: #ffffff;
}
[data-theme='dark'] .show_text {
  color: #ffffff;
}
[data-theme='dark'] .heroBanner {
  background-color: #262833;
}
